<template>
  <div v-loading="loading" class="box" :style="{ width: w + 'px', height: h + 'px' }">
    <img src="../../../../assets/sign/left_top.png" alt="" />
    <img src="../../../../assets/sign/right_top.png" alt="" />
    <img src="../../../../assets/sign/left_down.png" alt="" />
    <img src="../../../../assets/sign/right_down.png" alt="" />
    <div class="top">
      <div class="fs" style="white-space: nowrap; padding-right: 15px; font-size: 16px; margin-bottom: 0">字体大小</div>
      <el-slider @change="handleSlderChange" style="flex: 1" v-model="gap" :min="1" :max="6"></el-slider>
      <div class="fs" style="margin-bottom: 0; padding-left: 15px; font-size: 16px">{{ gap }}</div>
    </div>
    <div class="bottom">
      <div class="btn1" style="background: red; color: #ffffff" @click="reset">清空画板</div>
      <div class="btn2" style="background: #aaa; color: #ffffff" @click="backUp">撤回一步</div>
      <div class="btn3" style="background: #1890ff; color: #ffffff" @click="saveSignature">保存签名</div>
    </div>
    <div class="right">
      <div class="fs">字体</div>
      <div
        :class="{ border_no: font === item.background }"
        class="color_item"
        @click="switchFont(item.background)"
        v-for="item in fontBtnList"
        :key="item.background"
      >
        <div class="inner" :style="{ background: item.background }"></div>
      </div>
      <!-- <div class="color_item">
                <div class="inner" style="background: #1890ff"></div>
            </div>

            <div class="color_item">
                <div class="inner" style="background: green"></div>
            </div>
            <div class="color_item">
                <div class="inner" style="background: black"></div>
            </div> -->
      <!-- <div class="item">
        <div class="inner" style="background: white"></div>
    </div> -->
    </div>

    <div class="left">
      <div class="fs">背景</div>
      <div
        v-for="item in bgBtnList"
        :key="item.background"
        :class="{ border_no: bg === item.background }"
        class="color_item"
        @click="switchBg(item.background)"
      >
        <div class="inner" :style="{ background: item.background }"></div>
      </div>
      <!-- <div :class="{border_no:bg==='#d7d1d1'}"  class="color_item " @click="switchBg('#d7d1d1')">
                <div class="inner" style="background: #d7d1d1"></div>
            </div>

            <div :class="{border_no:bg==='#000000'}" class="color_item" @click="switchBg('#000000')">
                <div class="inner" style="background: #000000"></div>
            </div> -->
    </div>
    <div class="center" :style="{ background: bg }">
      <div id="signature" style="width: 100%; height: 100%">
        <canvas style="width: 100%; height: 100%" v-if="isShow" ref="canvasJuan" id="canvasJuan"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
const SmoothSignature = require('../../../../utils/index.umd.min.js')
console.log('SmoothSignature::', SmoothSignature)
const base64ToBlob = (base64, type = '') => {
  const [prefix, data] = base64.split(',')
  const mime = prefix.match(/:(.*?);/)?.[1] || type
  const binaryStr = atob(data)
  const bytes = new Uint8Array(binaryStr.length)

  for (let i = 0; i < binaryStr.length; i++) {
    bytes[i] = binaryStr.charCodeAt(i)
  }

  return new Blob([bytes], { type: mime })
}

export default {
  props: {
    w: {
      type: Number,
      required: false,
      default: document.body.clientWidth*0.7
    },
    h: {
      type: Number,
      required: false,
      default: document.body.clientWidth*0.7/7*3
    }
  },
  data() {
    return {
      signature: null,
      isShow: true,
      gap: 1,
      loading: false,
      bgBtnList: [{ background: '#d7d1d1' }, { background: '#e7e2e2' }, { background: '#000000' }],
      fontBtnList: [
        { background: '#000000' },
        { background: '#ff0000' },
        { background: '#1890ff' },
        { background: '#008000' }
      ],
      bg: '#d7d1d1',
      font: '#000000'
    }
  },
  mounted() {
    this.initCavas()
  },
  methods: {
    switchBg(e) {
      this.$message('画板已清空,请重新签名')
      this.handleSlderChange()
      this.bg = e
    },
    switchFont(e) {
      this.$message('画板已清空,请重新签名')
      this.handleSlderChange()
      this.font = e
    },
    initCavas() {
      let parent = this.$refs.canvasJuan
      // let rect = parent.getBoundingClientRect()
      // console.log('rect', rect);
      const parentWidth = parent.offsetWidth // 父元素宽度（含 padding + border）
      const parentHeight = parent.offsetHeight // 父元素高度（含 padding + border）
      console.log('w22222222222:', parentWidth)
      this.signature = new SmoothSignature(this.$refs.canvasJuan, {
        width: parent ? parentWidth : 700,
        height: parent ? parentHeight : 300,
        scale: 2,
        minWidth: Math.min(1 + Math.max(this.gap - 1, 0), 2),
        maxWidth: 2 + Math.max(this.gap - 1, 0),
        color: this.font,
        bgColor: this.bg
      })
    },
    async handleSlderChange() {
      this.$message('画板已清空,请重新签名')
      this.isShow = false
      this.loading = true
      console.log(this.gap, 'todo1111111')
      // console.log('ee',e);
      setTimeout(async () => {
        this.isShow = true
        await this.$nextTick()
        this.loading = false
        await this.initCavas()
      })
    },
    backUp() {
      // 撤销
      if (!this.signature.isEmpty()) {
        this.signature.undo()
      }
    },
    reset() {
      console.log('this.signature', this.signature)
      if (!this.signature.isEmpty()) {
        this.signature.clear()
      }
    },
    saveSignature() {
      const url = this.signature.getPNG() // 或者 signature.toDataURL()
      const blobUrl = base64ToBlob(url)
      this.$emit('getSign', blobUrl)
      console.log('url', url)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  .center {
    width: 100%;
    height: 100%;
  }

  position: relative;
  padding: 30px 95px;

  img:nth-child(1) {
    position: absolute;
    left: 0;
    top: 0;
  }

  img:nth-child(2) {
    position: absolute;
    right: 0;
    top: 0;
  }

  img:nth-child(3) {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  img:nth-child(4) {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .top {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 300px;
  }

  .bottom {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    text-align: center;

    //  border: 1px solid red;
    .btn1,
    .btn2,
    .btn3 {
      padding: 7px 9px;
      box-sizing: border-box;
      width: 105px;
      border-radius: 7px;
      box-sizing: border-box;
      cursor: pointer;
    }

    .btn2 {
      margin: 0 15px;
    }
  }

  .right {
    position: absolute;
    //   top: 27px;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;

    display: flex;
    flex-direction: column;
  }

  .left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25px;
  }

  .color_item {
    text-align: center;
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    //   border: 1px solid red;
    border-radius: 5px;
    padding: 3px;
    box-sizing: border-box;
    cursor: pointer;

    .inner {
      border-radius: 5px;
      height: 100%;
      width: 100%;
    }
  }

  .fs {
    background: linear-gradient(to bottom, #ff00c8, #23935a, green, black);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;
    margin-bottom: 5px;
  }
}

.border_no {
  border: 1px solid #aaa;
}
</style>
